<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <title>路由</title>
  <style>
    .active_demo{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <div>
      <a href="tel:123">打电话</a>
      <h1>home</h1>
      <button @click="goList">跳转到list</button>
    </div>
    <h1>嵌套路由</h1>
    <div>
      <router-link to="/home" tag="button">首页</router-link>
      <router-link to="/my" tag="button">我的</router-link>
      <router-link to="/list" tag="button">列表</router-link>
    </div>
    <router-view></router-view>
  </div>

  <template id="list">
    <div>
      <!-- <h1>list</h1>
      <button @click="goHome">返回首页</button> -->
      <router-link to="/list/list1">list1</router-link>
      <router-link to="/list/list2">list2</router-link>
      <router-view></router-view>
    </div>
  </template>
  <template id="home">
    <h1>首页</h1>
  </template>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>

    /**
      路由分两种形
        hash值： 开发使用，刷新地址不变
        history: 直接把url给变了，刷新报404 需要后台配合 
            BOM 操作浏览器的历史记录
    */


    // console.log(history)
    // go() 大于0前进 小于0后退
    // history.back()
    // history.forward()
    // pushState() 往记录里多加一个
    // replaceState() 

    // history.pushState(null, null, './panel.html') url必须要同源

    let Home = {template: '<h1>Home</h1>'}
    let My = {template: '<h1>My</h1>'}
    let List = {
      template: '#list',
      mounted(){},
      methods: {
        goHome(){
          this.$router.replace('/home')
        }
      }
    }


    let list1 = {template:'<h2>list1</h2>'}
    let list2 = {template:'<h2>list2</h2>'}


    let routes = [
      {
        path: '/',
        component: Home
      },
      {
        path: '/home',
        component: Home
      },
      {
        path: '/my',
        component: My
      },
      {
        path: '/list',
        component: List,
        // 子路由
        children: [
          {
            path: 'list1',
            component: list1
          },
          {
            path: 'list2',
            component: list2
          }
        ]
      },
      // 从上向下依次匹配，如果都没有匹配则走星号路由
      {
        path: '/*',
        // 重定向到home，直接修改url地址到指定路径，只能定向路径
        redirect: '/home'
      }
    ]
    // 路由默认的是hash的方式
    let router = new VueRouter({
      // mode: 'history',
      // 路由的映射表
      routes,
      linkActiveClass: 'active_demo',
      
    })

    let vm = new Vue({
      el: '#app',
      data: {

      },
      // 注入vue实例中，
      router,
      methods: {
        goList(){
          // 组件都有两个属性，$router(放的函数) $route(属性)
          // $router: go back forward push replace
          this.$router.push('/list')
          console.log(this.$route)
        }
      }
    })

    
    /**
    xiangyao qu cesuo
        ganjue dajia douzai chushi ni:
            meigeren douhenmang ni mei name zhongyao
            renmen dou zhihui guanzhu ziji
            nihai jide jintian chushang ren de xingwei ma
            women zhege xinxi baozha de shidai women zuode
            meijian shiqing zai beiren yinxiangzhong buhui
            chaoguo yitian women meigeren zai bieren yanli
            doushi yituan yinxiang, shenzhi dou jibuzhu ta
            zhangshenmeyang, 
    第一反应：
        逃避、
    每个人在别人心中就是一团印象，甚至连长相都不记得，名字都不记得了
        wanyaqin: qinqie, heshan, haoren, aixiao, 
        lxq: neixiang, buaishuohua, aixiao, 
        ljl: nengliao, 
        lhj: nengshuo, waixiang, aixiao, 
        yll: nengkaiwanxiao, xinzhikoukuai, 
        lmj: huopo, gaoxiao, zhudong, nengshuo, banshixiaolugao, 
        tsb: nengliao, youzhi, bushuohua, neixiang, qingshangdi, 
    改变、练习、
    她是普通人，neixiang，不爱shuohua，追求个性，
      染发、耳坠，衣服
      wogankan diyiji juede zhege dianshiju youdian yisi a 
      wo gang kaishi rangwo xiangqi lingyibu hanju jichengzhemen 
      yeshi xiaoyuan yeshi guizuxuexiao ,houlai caifaxian zheshi 
      manhua shijie he manhua renwu 
      
      端午只是一个漫画
      woxiang zhidao nage tushuguan kanbujian lian de nage nande shibushi manhua de zuozhe
      haishi nage chaoyouyu shi ganshenmede 
      sheizhi zhege manhuade zhujiao
      

      yuliang kanzheni de diyi fanying
          kongju: haipaziji buneng yingdui ta paochu de wenti
          jinzhang: ziji meiyou 
        解决：niye kanta 
      meijue geini shuohua de diyi fanying
        haipa: haipa ziji huida buhao, wa
        jinzhang: hapa ziji shuobuhao, 



      不完美是人生常态


      我也觉得有意识地静下心来，观察自己情绪的起伏和反应是一件很棒的事情。也是了解自己的一个好方法。观察自己遇到不同的事情和不同的人，内心的感觉什么。是高兴？激动？难过？害怕？还是愤怒？焦虑？询问自己为什么会有这样的感觉？有时候晚上睡觉前站在卫生间，我猛撩起刘海，注视着镜子里的自己，问自己：×××啊，将来你到底想要成为一个什么样的人呢？你会因为什么而高兴，又会因为什么而悲伤难过呢？青春的日子已经不多了，你预备怎么度过呢？
    */

  </script>
</body>
</html>